<template>
  <div class="warehouse-container">
    <h1 class="warehouse-title">仓库平面图</h1>

    <!-- 控制面板 -->
    <div class="control-panel">
      <div class="zoom-controls">
        <button @click="zoomOut" class="zoom-btn">-</button>
        <span>{{ Math.round(scale * 100) }}%</span>
        <button @click="zoomIn" class="zoom-btn">+</button>
      </div>
      <div class="legend">
        <div class="legend-item">
          <div class="legend-icon occupied">
            <i class="fas fa-box"></i>
          </div>
          <span>有库存</span>
        </div>
        <div class="legend-item">
          <div class="legend-icon frozen">
            <i class="fas fa-lock"></i>
          </div>
          <span>已冻结</span>
        </div>
        <div class="legend-item">
          <div class="legend-icon empty">
            <i class="fas fa-square"></i>
          </div>
          <span>空库位</span>
        </div>
        <div class="legend-item">
          <div class="legend-icon stacker">
            <i class="fas fa-truck-loading"></i>
          </div>
          <span>堆垛机</span>
        </div>
      </div>
    </div>

    <!-- 仓库布局 -->
    <div class="warehouse-layout" ref="layoutContainer">
      <div class="layout-content" :style="{ transform: `scale(${scale})` }">
        <div v-if="warehouseData" class="rows-container">
          <div v-for="(key, index) in sortedKeys" :key="key">
            <div class="warehouse-row">
              <div class="row-header">{{ key }}排</div>
              <div class="columns-container">
                <div v-for="columnKey in getSortedColumnKeys(warehouseData[key])"
                     :key="columnKey"
                     class="warehouse-column">
                  <div class="column-header">{{ columnKey }}列</div>
                  <div v-for="(valuess, keyss) in warehouseData[key][columnKey]"
                       :key="keyss"
                       class="levels-container">
                    <div v-for="(val, index) in valuess"
                         :key="index"
                         class="location-cell"
                         :class="getStatusClass(val.status)"
                         @click="showLevelDetails(val.pyName)">
                      <div class="location-content">
                        <span class="location-id">{{ val.locationId }}</span>
                        <div class="location-icon" :class="getStatusClass(val.status)">
                          <i :class="getStatusIcon(val.status)"></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 在第一排后添加通道 -->
            <div v-if="index === 1" class="warehouse-aisle">
              <div class="aisle-content">
                <div class="legend-item">
                  <div class="legend-icon stacker">
                    <i class="fas fa-truck-loading"></i>
                  </div>
                  <span>堆垛机</span>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>

    <!-- 详情弹窗 -->
    <div v-if="selectedLevel" class="modal-overlay" @click.self="closeModal">
      <div class="modal-content">
        <h3 class="modal-title">
          <i class="fas fa-box-open mr-2"></i>
          {{ selectedLevel.locationId }} {{ selectedLevel.name }} 详情
        </h3>
        <div class="modal-info">
          <p><i class="fas fa-barcode mr-2"></i><strong>物料编号：</strong> {{ selectedLevel.goodsId }}</p>
          <p><i class="fas fa-pallet mr-2"></i><strong>托盘号：</strong> {{ selectedLevel.ctl }}</p>
          <p><i class="fas fa-tag mr-2"></i><strong>产品型号：</strong> {{ selectedLevel.barcode }}</p>
          <p><i class="fas fa-cubes mr-2"></i><strong>数量：</strong> {{ selectedLevel.shelvesNum }}</p>
        </div>
        <button @click="closeModal" class="close-button">
          <i class="fas fa-times mr-2"></i>关闭
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { WarehouseData, SelectWarehouseData } from "../../../api/system/kwview";

export default {
  data() {
    return {
      warehouseData: null,
      selectedLevel: null,
      scale: 1,
      minScale: 0.3,
      maxScale: 1.5,
    };
  },

  computed: {
    sortedKeys() {
      if (!this.warehouseData) return [];
      return Object.keys(this.warehouseData).sort((a, b) => Number(a) - Number(b));
    }
  },

  created() {
    this.fetchWarehouseData();
    this.loadFontAwesome();
  },

  mounted() {
    this.addWheelZoomListener();
  },

  beforeDestroy() {
    this.removeWheelZoomListener();
  },

  methods: {
    loadFontAwesome() {
      const link = document.createElement('link');
      link.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css';
      link.rel = 'stylesheet';
      document.head.appendChild(link);
    },

    getSortedColumnKeys(row) {
      return Object.keys(row).sort((a, b) => Number(a) - Number(b));
    },

    fetchWarehouseData() {
      WarehouseData().then(r => {
        this.warehouseData = r;
      });
    },

    getStatusClass(status) {
      switch (status) {
        case '0':
          return 'status-empty';
        case '1':
          return 'status-frozen';
        case '2':
          return 'status-occupied';
        default:
          return 'status-unknown';
      }
    },

    getStatusIcon(status) {
      switch (status) {
        case '0':
          return 'fas fa-square';
        case '1':
          return 'fas fa-lock';
        case '2':
          return 'fas fa-box';
        default:
          return 'fas fa-square';
      }
    },

    showLevelDetails(locationId) {
      SelectWarehouseData({locationId}).then(r => {
        this.selectedLevel = r.data;
      });
    },

    closeModal() {
      this.selectedLevel = null;
    },

    zoomIn() {
      if (this.scale < this.maxScale) {
        this.scale = Math.min(this.scale + 0.1, this.maxScale);
      }
    },

    zoomOut() {
      if (this.scale > this.minScale) {
        this.scale = Math.max(this.scale - 0.1, this.minScale);
      }
    },

    handleWheel(e) {
      if (e.ctrlKey) {
        e.preventDefault();
        const delta = e.deltaY > 0 ? -0.1 : 0.1;
        const newScale = this.scale + delta;
        if (newScale >= this.minScale && newScale <= this.maxScale) {
          this.scale = newScale;
        }
      }
    },

    addWheelZoomListener() {
      const container = this.$refs.layoutContainer;
      if (container) {
        container.addEventListener('wheel', this.handleWheel, {passive: false});
      }
    },

    removeWheelZoomListener() {
      const container = this.$refs.layoutContainer;
      if (container) {
        container.removeEventListener('wheel', this.handleWheel);
      }
    }
  }
};
</script>

<style scoped>
.legend-icon.stacker {
  background-color: #3B82F6;
  color: white;
}

.warehouse-container {
  min-height: 100vh;
  background-color: #f3f4f6;
  padding: 1rem;
  overflow: hidden;
}

.warehouse-title {
  font-size: 1.875rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 1rem;
}

.control-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: white;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.zoom-btn {
  padding: 0.25rem 0.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.25rem;
  background-color: white;
  cursor: pointer;
}

.zoom-btn:hover {
  background-color: #f3f4f6;
}

.legend {
  display: flex;
  gap: 1.5rem;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.legend-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 1.2rem;
}

.legend-icon.empty {
  background-color: #F3F4F6;
  color: #6B7280;
}

.legend-icon.frozen {
  background-color: #EF4444;
  color: white;
}

.legend-icon.occupied {
  background-color: #3B82F6;
  color: white;
}

.warehouse-layout {
  overflow: auto;
  background-color: white;
  border-radius: 0.5rem;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  height: calc(100vh - 200px);
}

.layout-content {
  transform-origin: top left;
  transition: transform 0.2s ease;
}

.rows-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.warehouse-row {
  display: flex;
  gap: 1rem;
}

.row-header {
  writing-mode: vertical-lr;
  /*
  transform: rotate(180deg);
  */
  padding: 1rem 0;
  font-weight: bold;
  color: #374151;
  background-color: #f3f4f6;
  border-radius: 0.25rem;
  text-align: center;
}

.columns-container {
  display: flex;
  gap: 0.5rem;
}

.warehouse-column {
  min-width: 6rem;
}

.column-header {
  text-align: center;
  padding: 0.25rem;
  font-size: 0.875rem;
  color: #374151;
  background-color: #f3f4f6;
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
}

.levels-container {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.location-cell {
  height: 2.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0.25rem;
}

.location-cell:hover {
  transform: scale(1.05);
}

.location-content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem;
}

.location-id {
  font-size: 0.75rem;
  font-weight: 500;
}

.location-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 1rem;
}

.status-empty {
  background-color: #F3F4F6;
  color: #6B7280;
}

.status-empty .location-icon {
  background-color: #E5E7EB;
  color: #6B7280;
}

.status-frozen {
  background-color: #FEE2E2;
  color: #EF4444;
}

.status-frozen .location-icon {
  background-color: #EF4444;
  color: white;
}

.status-occupied {
  background-color: #EFF6FF;
  color: #3B82F6;
}

.status-occupied .location-icon {
  background-color: #3B82F6;
  color: white;
}

.status-unknown {
  background-color: #F3F4F6;
  color: #6B7280;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.modal-content {
  background-color: white;
  border-radius: 0.5rem;
  padding: 1.5rem;
  max-width: 28rem;
  width: 90%;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 1rem;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modal-info {
  margin-bottom: 1.5rem;
}

.modal-info p {
  margin: 0.5rem 0;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}



.close-button {
  width: 100%;
  padding: 0.75rem;
  background-color: #3B82F6;
  color: white;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.close-button:hover {
  background-color: #2563EB;
}

.mr-2 {
  margin-right: 0.5rem;
}

/* 新增样式 */
.warehouse-aisle {
  height: 60px;
  background-color: #f0f0f0;
  margin: 10px 0;
  display: flex;
  justify-content: left;
  align-items: center;
  width: 190%;
}

.aisle-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
}

.stacker-crane-logo {
  max-height: 50px;
  max-width: 100px;
}
</style>
